<template>
  <div
    class="community-card-box community-tab-box f-a-c"
    :style="{ 'margin-top': mt + 'px', padding: padding, 'margin-bottom': mb + 'px' }"
  >
    <div
      class="tab-item"
      v-for="(item, index) in tabList"
      :key="index"
      :class="{ 'tab-item-active': index == tabActive }"
      @click="tabClick(index)"
    >
      {{ item[lable] }}
      <span v-if="numKey">({{ item[numKey] }})</span>
    </div>
  </div>
</template>
<script>
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import {
  defineComponent,
  reactive,
  toRefs,
  onUnmounted,
  onMounted,
  computed,
  getCurrentInstance,
} from "vue";
export default defineComponent({
  props: {
    tabList: {
      type: Array,
      default: () => [],
    }, //tab选项列表
    lable: {
      type: String,
      default: "plate_name",
    }, //展示文本key
    activeIdx: {
      type: Number,
      default: 0,
    }, //默认选中下标
    mt: {
      type: Number,
      default: 10,
    }, //tab栏上边距
    mb: {
      type: Number,
      default: 0,
    }, //tab栏下边距
    padding: {
      type: String,
      default: "20px 40px",
    }, //tab栏上下内边距
    numKey: {
      type: String,
      default: "",
    }, //数量key
  },
  setup(props, { attrs, slots, emit }) {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    const store = useStore();
    let data = reactive({
      tabActive: 0,
    });

    let tabClick = (idx) => {
      data.tabActive = idx;
      emit("change", idx);
    };

    onMounted(() => {
      // 默认选中项
      if (props.activeIdx) {
        data.tabActive = props.activeIdx;
      }
    });

    return {
      tabClick,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
// tab栏
.community-tab-box {
  //   margin-top: 10px;
  //   padding: 20px 40px;
  background: #ffffff;
  border-radius: 10px;

  .tab-item {
    font-size: 14px;
    color: #656f79;
    margin-right: 8%;
    cursor: pointer;
    padding: 5px 12px;
    border-radius: 6px;
    white-space: nowrap;
    &:hover {
      background: rgba(100, 200, 220, 0.1);
      color: #64c8dc;
    }
  }
  .tab-item-active {
    color: #64c8dc;
    // font-weight: bold;
  }

  .tab-item:last-child {
    margin-right: 0px;
  }
}
</style>
